<template>
    <div class="layout" style="position: relative;height: 100%">
        <div class="layout-content">
          <div class="left">
            <Menu width="auto"  @on-select="handleSelect" style="height: 100%">
              <MenuItem name="/home">
                <Icon type="android-home"></Icon>
                管理首页
              </MenuItem>
              <Submenu name="1">
                <template slot="title">
                  <Icon type="android-person"></Icon>
                  会员管理
                </template>
                <MenuItem name="/option">会员列表</MenuItem>
                <MenuItem name="1-2">Option 2</MenuItem>
                <MenuItem name="1-3">Option 3</MenuItem>
              </Submenu>
              <Submenu name="2">
                <template slot="title">
                  <Icon type="navicon-round"></Icon>
                  社区管理
                </template>
                <MenuItem name="2-1">Option 1</MenuItem>
                <MenuItem name="2-2">Option 2</MenuItem>
              </Submenu>
              <Submenu name="3">
                <template slot="title">
                  <Icon type="ios-videocam"></Icon>
                  影视管理
                </template>
                <MenuItem name="3-1">Option 1</MenuItem>
                <MenuItem name="3-2">Option 2</MenuItem>
              </Submenu>
              <Submenu name="3">
                <template slot="title">
                  <Icon type="android-settings"></Icon>
                  系统设置
                </template>
                <MenuItem name="3-1">Option 1</MenuItem>
                <MenuItem name="3-2">Option 2</MenuItem>
              </Submenu>
            </Menu>
          </div>
          <div class="">
            <div class="right">
              <div class="right-cont">
                <router-view></router-view>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
  export default {
    methods: {
      handleSelect (name) {
        this.$router.push(name)
      }
    }
  }
</script>

<style scoped>
  .layout-content{
    position: relative;
    height: 100%;
    background: #fff;
    border-radius: 4px;
  }
  .layout-content-main{
    padding: 10px;
  }
  .left {
    position: absolute;
    width: 220px;
    top: 2px;
    left: 0;
    bottom: 0;
  }
  .right{
    position: absolute;
    top: 2px;
    right: 0;
    bottom: 0;
    left: 220px;
  }
  .right-cont{
    margin-left: 10px;
    padding-bottom: 50px;
    height: 100%;
    overflow-y: scroll;
  }
</style>
